import React, { useState, useEffect } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import Area from 'components/Area';
import { Card, Form, Switch, Select, Button, message } from 'antd';
import { useRequest } from 'ahooks';
import {
    getCameraSettingByArea,
    ICameraAreaSetting,
    updateCameraSettingByArea,
    addCameraSettingByArea,
} from 'api/CameraSetting';
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};
const { Item } = Form;
const { Option } = Select;
const FuncSetting = () => {
    const [selectedArea, setSelectedArea] = useState(0);
    const [areaSetting, setAreaSetting] = useState<ICameraAreaSetting>();
    const { run: getCameraSettingByAreaRun } = useRequest(() => getCameraSettingByArea({ areaId: selectedArea }), {
        manual: true,
        onSuccess: (result) => {
            console.log(result);
            setAreaSetting(result);
        },
    });
    useEffect(() => {
        form.resetFields();
        if (selectedArea === -1) return;
        getCameraSettingByAreaRun().then(() => form.resetFields());
    }, [selectedArea]);
    /** 表单初始化 */
    const [form] = Form.useForm();
    const saveChange = () => {
        const values: any = form.getFieldsValue();
        let params: any = {
            ...areaSetting,
            protocolType: values.protocolType,
            pedestrianFlag: +values.pedestrianFlag,
            liftingFlag: +values.liftingFlag,
            collisionFlag: +values.collisionFlag,
            syncFlag: +values.syncFlag,
        };
        console.log(params);
        if (params.id) {
            updateCameraSettingByArea(params).then(() => {
                message.success('更新成功');
            });
        } else {
            params.areaId = selectedArea
            addCameraSettingByArea(params).then(() => {
                message.success('新增成功');
            })
        }
    };
    return (
        <div className="func-setting">
            <Breadcrumb crumbs={['监控配置', '功能设置']} />
            <div className="flex">
                <Area selectedArea={selectedArea} setSelectedArea={setSelectedArea} canSelectAll={false}></Area>
                <Card className="func-setting-right" hoverable>
                    <Form {...formItemLayout} form={form} initialValues={areaSetting}>
                        <Item label="数据传输协议" name="protocolType">
                            <Select placeholder="请选择" style={{ width: 200 }} allowClear>
                                <Option value={0}>ZZIOT(系统默认)</Option>
                                <Option value={1}>ON VIF</Option>
                            </Select>
                        </Item>
                        <Item label="车辆行人检测" name="pedestrianFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="升降异常检测" name="liftingFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="碰撞报警检测" name="collisionFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="升降同步性检测" name="syncFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        {selectedArea !== -1 && (
                            <Item wrapperCol={{ span: 12, offset: 6 }}>
                                <Button type="primary" onClick={saveChange}>
                                    保存修改
                                </Button>
                            </Item>
                        )}
                    </Form>
                </Card>
            </div>
        </div>
    );
};
export default FuncSetting;
